import React, { useEffect, useState } from 'react';
import {
  MicroAppProvider,
  useHistory,
  Matcher,
  Match,
  useMicroApp,
  useActiveEntry,
  emitGloblState,
  MicroApp,
  // history,
  Outlet,
} from "@web-design/micro-app";
import { MicroApp as QiankunMicroApp } from '@web-design/micro-app/modules/qiankun'

import { Tabs } from 'antd';
const WaitNode = ({ id }) => {
  const [_id, setId] = useState('');
  useEffect(() => {
    setTimeout(() => {

      setId(id)
    }, 1000)
  }, [])
  return <div id={_id} />
}
const Delayed = ({ children }) => {
  const [el, setEl] = useState(<div>loading</div>);
  useEffect(() => {
    requestAnimationFrame(()=>{
      
      setEl(children)
    })
    // setTimeout(() => {
    //   setEl(children)
    // }, 300)
  }, [])
  return <div>
    {el}
  </div>
}
const TabsNav = () => {
  const [apps, setApps] = useState([]);
  const [items, setItems] = useState([]);
  const [activeKey, setActiveKey] = useState("");
  const { route } = useActiveEntry();
  useEffect(() => {
    
    if (route.title) {
      
      const title = typeof route.title === 'function' ? route.title() : route.title
      setActiveKey(title)
      const item = items.find((v) => v.label == title);

      if (!item) {
        items.push({
          label: title,
          key: title,
          children: route.activeRule ? null : <React.Suspense><MicroApp  {...route} /></React.Suspense>,
        });
        setItems([...items]);
        if (route.activeRule) {
          apps.push({
            ...route
          });
          setApps([...apps]);
        }

      }
    }
    console.log({ route });
    // const un = history.listen(() => {
    //   alert(';as')
    // });
    // return () => {

    //   un();
    // };
  }, [route]);
  // 
  return (<div>
    <Tabs activeKey={activeKey} items={items} />

    <div style={{ display: location.pathname.startsWith('/vue2') ? 'block' : 'none' }}>
      <QiankunMicroApp
        onLoad={() => { }}
        entry="http://localhost:8081/"
        container="#app1"
        activeRule={() => true}
        name="#app1"
      />
    </div>
    <div style={{ display: location.pathname.startsWith('/vue3') ? 'block' : 'none' }}>
      <QiankunMicroApp
        onLoad={() => { }}
        entry="http://localhost:8082/"
        container="#app2"
        activeRule={() => true}
        name="#app2"
      />
    </div>
    {/* {apps.map(app => {
      return <div key={app.name} style={{ display: route.name == app.name ? 'block' : 'none' }}>
        <MicroApp onLoad={()=>{
      
        }} {...app} />
      </div>
    })}  */}
    {/* {route&&route.activeRule? <MicroApp  {...route} />:null} */}
  </div>)
}
export default TabsNav